﻿<!DOCTYPE HTML>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript">
function winSwitch(o,id,openClass,closeClass){
	var arr = id.split(',');
	if(o.className == closeClass){
		o.className = openClass;
		for(var i=0; i<arr.length; i++){
			document.getElementById(arr[i]).style.display = 'block';
		}
	}else{
		o.className = closeClass;
		for(var i=0; i<arr.length; i++){
			document.getElementById(arr[i]).style.display = 'none';
		}
	}
}
function closeWin(obj){
	
}
function ajaxXml(url,fun){
	var xml = new Object();
	xml.ajaxReturn = function(){
		var aj = new ajax();
		aj.getHttp(url,'xml',function(data){fun(data)});
	}
	return xml.ajaxReturn();
}
function userListXML(obj,time){
	var o = new Object();
	o.xml = function(){
		var type = obj.className == 'hide' ? 'amount' : 'list';
		ajaxXml('api/xml.php?type='+type+'&r='+Math.random(),function(data){
			var dt = document.createElement("dt");
			dt.onclick = function(){
				obj.className = obj.className == 'hide' ? 'show' : 'hide';
				userListXML(obj,5);
			}
			obj.innerHTML = '';			
			if(type == 'amount'){
				var el = data.getElementsByTagName('amount');
				dt.innerHTML = '<div class="name">用户列表['+el[0].firstChild.nodeValue+']<span class="pic"></span></div>';
				obj.appendChild(dt);
			}else{
				var el = data.getElementsByTagName('user');
				dt.innerHTML = '<div class="name">用户列表['+el.length+']<span class="pic"></span></div>';
				obj.appendChild(dt);
				for(var i=0; i<el.length; i++){
					var name = el[i].getElementsByTagName("name");
					var dd = document.createElement("dd");
					dd.innerHTML = '<a onClick="msgXML(\''+name[0].firstChild.nodeValue+'\')">'+name[0].firstChild.nodeValue+'</a>';
					obj.appendChild(dd);
				}
			}
		});
		setTimeout(o.xml,time*1000);
	}
	return o.xml();
}
function msgXML(user){
	var receiveTime;
	if($(user) != null){return false}
	var main = document.createElement("div");
	main.className = 'main';
	main.id = user;
	//title
	var title = document.createElement("div");
	title.className = 'title';
	var titleName = document.createElement("div");
	titleName.className = 'name';
	titleName.innerHTML = '与'+user+'对话中...';
	title.appendChild(titleName);
	var titleClose = document.createElement("div");
	titleClose.className = 'close';
	title.appendChild(titleClose);
	titleClose.onclick = function(){
		document.body.removeChild(main);
		clearTimeout(receiveTime);
	}
	main.appendChild(title);
	//receive
	var receive = document.createElement("div");
	receive.id = user+'receive';
	receive.className = 'receive';
	main.appendChild(receive);
	//send
	var send = document.createElement("div");
	send.className = 'send';
	var msg = document.createElement("textarea");
	msg.id = user+'msg';
	msg.className = 'msg';
	send.appendChild(msg);
	var send_btn = document.createElement("textarea");
	send_btn.className = 'send_btn';
	send.appendChild(send_btn);
	send_btn.onclick = function(){
		var msg = $(user+'msg').value;
		ajaxXml('api/xml.php?type=send&to='+user+'&msg='+msg+'&r='+Math.random(),function(data){
			var el = data.getElementsByTagName('send')[0];
			var annal = document.createElement('div');
			annal.innerHTML = el.getElementsByTagName('user')[0].firstChild.nodeValue+'<br/>'+el.getElementsByTagName('msg')[0].firstChild.nodeValue;
			$(user+'receive').appendChild(annal);
			$(user+'msg').value = '';
		});
	}
	main.appendChild(send);
	document.body.appendChild(main);
	var receive = function(){
		ajaxXml('api/xml.php?type=receive&to='+user+'&r='+Math.random(),function(data){
			var el = data.getElementsByTagName('receive');
			for(var i=0; i<el.length; i++){
				var annal = document.createElement('div');
				var userName = el[i].getElementsByTagName('user')[0].firstChild.nodeValue;
				var time = el[i].getElementsByTagName('time')[0].firstChild.nodeValue;
				var msg = el[i].getElementsByTagName('msg')[0].firstChild.nodeValue;
				annal.innerHTML = user+' '+time+'<br/>'+msg;
				$(userName+'receive').appendChild(annal);
			}			
		});
		receiveTime = setTimeout(receive,3000);
	}
	receive();
}
window.onload = function(){
	var obj = $('user');
	userListXML(obj,5);
}
</script>
<style type="text/css">
* {padding:0px; margin:0px;}
ul,li {list-style:none; line-height:12px;}
.layout {width:100%;}
.list {width:300px;}
.main {width:300px; font-size:12px; border:1px solid #ddd; background-color:#f3f3f3;}

.title {height:22px; line-height:22px; background:url(image/main.gif) 0px -22px; padding-left:20px;}
.title .name {font-size:12px; color:#fff; font-weight:bold; background-image:url(image/main.gif);}
.title .open {width:20px; height:22px; float:right; margin-top:-22px; cursor:pointer;}
.title .min {width:20px; height:22px; background:url(image/main.gif) -40px -22px; float:right; margin-top:-22px; cursor:pointer;}
.title .close {width:20px; height:22px; background:url(image/main.gif) -60px -22px; float:right; margin-top:-22px; cursor:pointer;}

.tools {height:36px; background:url(image/main.gif) 0px -44px;}
.tools .msg_num {padding-left:40px; height:36px; line-height:36px; font-size:12px; background:url(image/main.gif) -20px -80px; background-repeat:no-repeat; float:left;}
.tools .pic {width:20px; height:36px; background:url(image/main.gif) 0px -80px; background-repeat:no-repeat; float:right;}
.tools .close {width:20px; height:20px; background:url(image/main.gif) -40px -156px; float:right; margin-top:6px; margin-right:10px; cursor:pointer;}
.tools .open {width:20px; height:20px; background:url(image/main.gif) -40px -176px; float:right; margin-top:6px; margin-right:10px; cursor:pointer;}

.user dl {font-size:12px; border-left:1px solid #c9c9cb; border-right:1px solid #c9c9cb; background-color:#eeedf3; padding:5px;}
.user dl dd {line-height:20px; border-bottom:1px dotted #fff;}
.user dl dd:hover {background-color:#fff;}
.user dl dd a {padding-left:20px; background:url(image/main.gif) -40px -156px; background-repeat:no-repeat; cursor:pointer;}
.user dl dt {height:20px; line-height:20px; background:url(image/main.gif) 0px -156px; border:0px; background-repeat:no-repeat; padding-left:20px; cursor:pointer;}
.user dl dt .name {background:url(image/main.gif) 0px -136px;}
.user dl dt .pic {width:20px; height:20px; background:url(image/main.gif) -20px -156px; float:right; _margin-top:-20px;}
.user .hide dd {display:none;}
.user .show dd {display:block;}

.bottom {height:26px; line-height:26px; background:url(image/main.gif) 0px -176px; padding-left:20px;}
.bottom .info {text-align:center; font-size:12px; color:#888; background:url(image/main.gif); background-position:bottom;}
.bottom .pic {width:20px; height:26px; line-height:26px; background:url(image/main.gif) -20px -176px; float:right; margin-top:-26px;}

.receive {height:100px; background-color:#fff; overflow:auto;}
.send {margin-top:10px;}
.send .msg {height:60px; border:1px solid #e3e3e3;}
.send_btn {width:40px; height:20px; font-size:12px; color:#fff; font-weight:bold; border:none; background:url(image/main.gif) 0px -116px; float:right; margin-top:5px;}

.list .open {background:url(image/main.gif) -20px -22px;}
.main .open {background:url(image/main.gif) -60px -22px;}
</style>
</head>

<body>
<div class="layout" id="l">
    <div class="list">
        <div class="title">
        	<div class="name">在线客服</div>
            <span class="open" onClick="winSwitch(this,'user','open','min')"></span>
        </div>
        <div class="tools"><div class="msg_num"><a href="#">您有()条新消息</a></div></div>
        <div class="user"><dl id="user" class="hide"></dl></div>
        <div class="bottom"><div class="info">www.hometj.com</div><span class="pic"></span></div>
    </div>
</div>
<a onClick="alert(document.body.innerHTML)">测试</a>
</body>
</html>